<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增销售机会 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/opportunity-form.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">销售管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item">
                        <a href="opportunity-management.html">销售机会</a>
                    </span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">新增机会</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">6</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">新增销售机会</h1>
                <p class="page-subtitle">创建新的销售机会，开始客户转化跟踪</p>
            </div>
            <div class="header-right">
                <button class="btn btn-secondary" id="save-draft-btn">
                    <i class="fas fa-save"></i>
                    保存草稿
                </button>
                <button class="btn btn-primary" id="save-opportunity-btn">
                    <i class="fas fa-check"></i>
                    创建机会
                </button>
            </div>
        </header>

        <!-- 表单内容 -->
        <div class="form-container">
            <form id="opportunity-form" class="opportunity-form">
                <!-- 步骤指示器 -->
                <div class="step-indicator">
                    <div class="step active" data-step="1">
                        <div class="step-number">1</div>
                        <div class="step-title">基础信息</div>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="2">
                        <div class="step-number">2</div>
                        <div class="step-title">客户需求</div>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="3">
                        <div class="step-number">3</div>
                        <div class="step-title">决策分析</div>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" data-step="4">
                        <div class="step-number">4</div>
                        <div class="step-title">跟进计划</div>
                    </div>
                </div>

                <!-- 步骤1: 基础信息 -->
                <div class="form-step active" id="step-1">
                    <div class="form-section">
                        <h2 class="section-title">机会基础信息</h2>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label required">机会名称</label>
                                <input type="text" class="form-input" id="opportunity-name" placeholder="例如：李女士夫妇-云南深度7日游" required>
                                <div class="form-hint">建议格式：客户姓名-产品简述</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label required">机会等级</label>
                                <select class="form-select" id="opportunity-level" required>
                                    <option value="">请选择机会等级</option>
                                    <option value="A">A级 (热门) - 意向强烈，预计7天内成交</option>
                                    <option value="B">B级 (温热) - 有明确意向，预计半月内成交</option>
                                    <option value="C">C级 (一般) - 初步意向，需要培育</option>
                                    <option value="D">D级 (冷门) - 意向模糊，长期培育</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label required">线索来源</label>
                                <select class="form-select" id="lead-source" required>
                                    <option value="">请选择线索来源</option>
                                    <option value="activity">邀约活动转化</option>
                                    <option value="consultation">客户主动咨询</option>
                                    <option value="referral">老客户推荐</option>
                                    <option value="online">网络营销</option>
                                    <option value="exhibition">展会线索</option>
                                    <option value="community">社区推广</option>
                                    <option value="partner">合作伙伴</option>
                                    <option value="other">其他渠道</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label required">机会类型</label>
                                <select class="form-select" id="opportunity-type" required>
                                    <option value="">请选择机会类型</option>
                                    <option value="new-customer">新客户首单</option>
                                    <option value="repeat-customer">老客户复购</option>
                                    <option value="upgrade">客户升级</option>
                                    <option value="referral-order">转介绍订单</option>
                                    <option value="group-order">团体订单</option>
                                    <option value="custom-order">定制订单</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label required">关联客户</label>
                                <div class="customer-selector">
                                    <input type="text" class="form-input" id="customer-search" placeholder="搜索客户姓名或手机号">
                                    <button type="button" class="btn btn-outline" id="select-customer-btn">
                                        <i class="fas fa-search"></i>
                                        选择客户
                                    </button>
                                </div>
                                <div class="selected-customers" id="selected-customers">
                                    <!-- 已选择的客户会显示在这里 -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label required">负责顾问</label>
                                <select class="form-select" id="consultant" required>
                                    <option value="">请选择负责顾问</option>
                                    <option value="1">张顾问</option>
                                    <option value="2">李顾问</option>
                                    <option value="3">王顾问</option>
                                    <option value="4">陈顾问</option>
                                    <option value="5">刘顾问</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label required">预计成交金额</label>
                                <div class="input-group">
                                    <span class="input-prefix">¥</span>
                                    <input type="number" class="form-input" id="expected-amount" placeholder="0.00" step="0.01" required>
                                </div>
                                <div class="form-hint">请填写预估的订单总价值</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label required">预计成交日期</label>
                                <input type="date" class="form-input" id="expected-close-date" required>
                                <div class="form-hint">基于客户出行时间预估</div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">预计出团日期</label>
                            <input type="date" class="form-input" id="expected-departure-date">
                            <div class="form-hint">客户计划的实际出行时间</div>
                        </div>
                    </div>
                </div>

                <!-- 步骤2: 客户需求 -->
                <div class="form-step" id="step-2">
                    <div class="form-section">
                        <h2 class="section-title">客户需求分析</h2>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">目的地偏好</label>
                                <textarea class="form-textarea" id="destination-preference" rows="3" placeholder="客户想去的地方、偏好的目的地类型..."></textarea>
                            </div>
                            <div class="form-group">
                                <label class="form-label">出行时间窗口</label>
                                <div class="date-range">
                                    <input type="date" class="form-input" id="travel-start-date" placeholder="开始日期">
                                    <span class="date-separator">至</span>
                                    <input type="date" class="form-input" id="travel-end-date" placeholder="结束日期">
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">计划天数</label>
                                <div class="input-group">
                                    <input type="number" class="form-input" id="travel-days" placeholder="0" min="1">
                                    <span class="input-suffix">天</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">出行人数</label>
                                <div class="input-group">
                                    <input type="number" class="form-input" id="travel-people" placeholder="0" min="1">
                                    <span class="input-suffix">人</span>
                                </div>
                                <div class="form-hint">请注明参与人员的关系（如夫妇、家庭等）</div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">预算范围</label>
                                <div class="budget-range">
                                    <div class="input-group">
                                        <span class="input-prefix">¥</span>
                                        <input type="number" class="form-input" id="budget-min" placeholder="最低预算">
                                    </div>
                                    <span class="range-separator">-</span>
                                    <div class="input-group">
                                        <span class="input-prefix">¥</span>
                                        <input type="number" class="form-input" id="budget-max" placeholder="最高预算">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">出行人员关系</label>
                                <input type="text" class="form-input" id="people-relationship" placeholder="例如：夫妇、三代同堂、朋友结伴">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">特殊要求</label>
                            <textarea class="form-textarea" id="special-requirements" rows="4" placeholder="客户的特殊需求和注意事项，如饮食限制、健康状况、住宿要求等..."></textarea>
                        </div>

                        <div class="requirement-tags">
                            <label class="form-label">需求标签</label>
                            <div class="tag-group">
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="natural-scenery">
                                    <span class="tag">自然风光</span>
                                </label>
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="cultural-heritage">
                                    <span class="tag">人文古迹</span>
                                </label>
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="leisure-vacation">
                                    <span class="tag">休闲度假</span>
                                </label>
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="health-wellness">
                                    <span class="tag">健康养生</span>
                                </label>
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="food-culture">
                                    <span class="tag">美食文化</span>
                                </label>
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="photography">
                                    <span class="tag">摄影采风</span>
                                </label>
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="shopping">
                                    <span class="tag">购物娱乐</span>
                                </label>
                                <label class="tag-checkbox">
                                    <input type="checkbox" value="temperature-escape">
                                    <span class="tag">避暑避寒</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 步骤3: 决策分析 -->
                <div class="form-step" id="step-3">
                    <div class="form-section">
                        <h2 class="section-title">决策过程分析</h2>
                        
                        <div class="subsection">
                            <h3 class="subsection-title">决策角色识别</h3>
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="form-label">主决策人</label>
                                    <select class="form-select" id="main-decision-maker">
                                        <option value="">请选择主决策人</option>
                                        <!-- 这里会动态加载已选择的客户 -->
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">影响决策人</label>
                                    <select class="form-select" id="decision-influencer">
                                        <option value="">请选择影响决策人</option>
                                        <!-- 这里会动态加载已选择的客户或添加新的影响人 -->
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="form-label">实际使用者</label>
                                    <input type="text" class="form-input" id="actual-users" placeholder="实际参与旅游的人员">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">实际支付者</label>
                                    <select class="form-select" id="payer">
                                        <option value="">请选择支付者</option>
                                        <!-- 这里会动态加载已选择的客户 -->
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="subsection">
                            <h3 class="subsection-title">决策特点分析</h3>
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="form-label">决策风格</label>
                                    <select class="form-select" id="decision-style">
                                        <option value="">请选择决策风格</option>
                                        <option value="quick">快速决策型 - 很快做决定，不犹豫</option>
                                        <option value="analytical">谨慎分析型 - 需要详细比较和分析</option>
                                        <option value="consultative">征询意见型 - 需要咨询家人朋友意见</option>
                                        <option value="price-oriented">价格导向型 - 主要关注价格和性价比</option>
                                        <option value="quality-oriented">品质导向型 - 更关注服务质量和体验</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">预估决策周期</label>
                                    <div class="input-group">
                                        <input type="number" class="form-input" id="decision-cycle" placeholder="0" min="1">
                                        <span class="input-suffix">天</span>
                                    </div>
                                </div>
                            </div>

                            <div class="decision-factors">
                                <label class="form-label">关键决策因素评估</label>
                                <div class="factor-grid">
                                    <div class="factor-item">
                                        <span class="factor-name">价格敏感度</span>
                                        <div class="rating-input">
                                            <input type="range" class="factor-range" id="price-sensitivity" min="1" max="5" value="3">
                                            <span class="rating-value">3</span>
                                        </div>
                                    </div>
                                    <div class="factor-item">
                                        <span class="factor-name">品质要求</span>
                                        <div class="rating-input">
                                            <input type="range" class="factor-range" id="quality-requirement" min="1" max="5" value="3">
                                            <span class="rating-value">3</span>
                                        </div>
                                    </div>
                                    <div class="factor-item">
                                        <span class="factor-name">安全关注</span>
                                        <div class="rating-input">
                                            <input type="range" class="factor-range" id="safety-concern" min="1" max="5" value="3">
                                            <span class="rating-value">3</span>
                                        </div>
                                    </div>
                                    <div class="factor-item">
                                        <span class="factor-name">时间灵活性</span>
                                        <div class="rating-input">
                                            <input type="range" class="factor-range" id="time-flexibility" min="1" max="5" value="3">
                                            <span class="rating-value">3</span>
                                        </div>
                                    </div>
                                    <div class="factor-item">
                                        <span class="factor-name">服务要求</span>
                                        <div class="rating-input">
                                            <input type="range" class="factor-range" id="service-requirement" min="1" max="5" value="3">
                                            <span class="rating-value">3</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="subsection">
                            <h3 class="subsection-title">竞争情况分析</h3>
                            <div class="form-group">
                                <label class="form-label">是否存在竞争对手</label>
                                <div class="radio-group">
                                    <label class="radio-option">
                                        <input type="radio" name="has-competitor" value="yes">
                                        <span class="radio-text">是</span>
                                    </label>
                                    <label class="radio-option">
                                        <input type="radio" name="has-competitor" value="no">
                                        <span class="radio-text">否</span>
                                    </label>
                                </div>
                            </div>

                            <div class="competitor-details" id="competitor-details" style="display: none;">
                                <div class="form-group">
                                    <label class="form-label">竞争对手信息</label>
                                    <input type="text" class="form-input" id="competitor-info" placeholder="竞争对手名称和基本情况">
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label class="form-label">对方优势</label>
                                        <textarea class="form-textarea" id="competitor-advantages" rows="3" placeholder="竞争对手的优势点..."></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">我方优势</label>
                                        <textarea class="form-textarea" id="our-advantages" rows="3" placeholder="我们相比对方的优势..."></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 步骤4: 跟进计划 -->
                <div class="form-step" id="step-4">
                    <div class="form-section">
                        <h2 class="section-title">初始跟进计划</h2>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label required">首次跟进时间</label>
                                <input type="datetime-local" class="form-input" id="first-followup-time" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label required">跟进方式</label>
                                <select class="form-select" id="first-followup-method" required>
                                    <option value="">请选择跟进方式</option>
                                    <option value="phone">电话沟通</option>
                                    <option value="wechat">微信交流</option>
                                    <option value="visit">上门拜访</option>
                                    <option value="email">邮件联系</option>
                                    <option value="sms">短信联系</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label required">跟进目标</label>
                            <textarea class="form-textarea" id="followup-goal" rows="3" placeholder="第一次跟进要达成的目标..." required></textarea>
                        </div>

                        <div class="form-group">
                            <label class="form-label">准备工作</label>
                            <textarea class="form-textarea" id="preparation-work" rows="3" placeholder="需要提前准备的材料和信息..."></textarea>
                        </div>

                        <div class="form-group">
                            <label class="form-label">沟通要点</label>
                            <textarea class="form-textarea" id="communication-points" rows="4" placeholder="关键沟通要点和话术..."></textarea>
                        </div>

                        <div class="reminder-settings">
                            <label class="form-label">提醒设置</label>
                            <div class="reminder-options">
                                <label class="checkbox-option">
                                    <input type="checkbox" value="30min" checked>
                                    <span class="checkbox-text">提前30分钟提醒</span>
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" value="1hour">
                                    <span class="checkbox-text">提前1小时提醒</span>
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" value="1day">
                                    <span class="checkbox-text">提前1天提醒</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表单导航按钮 -->
                <div class="form-navigation">
                    <button type="button" class="btn btn-secondary" id="prev-step-btn" style="display: none;">
                        <i class="fas fa-chevron-left"></i>
                        上一步
                    </button>
                    <button type="button" class="btn btn-primary" id="next-step-btn">
                        下一步
                        <i class="fas fa-chevron-right"></i>
                    </button>
                    <button type="submit" class="btn btn-primary" id="submit-btn" style="display: none;">
                        <i class="fas fa-check"></i>
                        创建机会
                    </button>
                </div>
            </form>
        </div>
    </main>

    <!-- 模态框：选择客户 -->
    <div class="modal-overlay" id="customer-selector-modal">
        <div class="modal large-modal">
            <div class="modal-header">
                <h3 class="modal-title">选择客户</h3>
                <button type="button" class="modal-close" onclick="closeCustomerSelector()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="customer-search-section">
                    <div class="search-input-group">
                        <i class="fas fa-search"></i>
                        <input type="text" class="search-input" id="customer-search-input" placeholder="搜索客户姓名或手机号">
                    </div>
                </div>
                
                <div class="customer-list">
                    <div class="customer-item" data-customer-id="101">
                        <div class="customer-avatar">李</div>
                        <div class="customer-info">
                            <div class="customer-name">李大妈</div>
                            <div class="customer-phone">139****8002</div>
                            <div class="customer-tags">
                                <span class="tag tag-vip">VIP客户</span>
                                <span class="tag tag-active">有效客户</span>
                            </div>
                        </div>
                        <button class="btn btn-outline select-customer-btn">选择</button>
                    </div>

                    <div class="customer-item" data-customer-id="102">
                        <div class="customer-avatar">王</div>
                        <div class="customer-info">
                            <div class="customer-name">王先生</div>
                            <div class="customer-phone">137****8003</div>
                            <div class="customer-tags">
                                <span class="tag tag-potential">潜在客户</span>
                            </div>
                        </div>
                        <button class="btn btn-outline select-customer-btn">选择</button>
                    </div>

                    <div class="customer-item" data-customer-id="103">
                        <div class="customer-avatar">陈</div>
                        <div class="customer-info">
                            <div class="customer-name">陈阿姨</div>
                            <div class="customer-phone">138****8004</div>
                            <div class="customer-tags">
                                <span class="tag tag-normal">普通客户</span>
                            </div>
                        </div>
                        <button class="btn btn-outline select-customer-btn">选择</button>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeCustomerSelector()">取消</button>
                    <a href="customer-form.html" class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        新增客户
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/opportunity-form.js"></script>
</body>
</html>